<template>
  <div>
    <el-dialog title="项目报备" v-model="showDialog" :width="dialogWidth" :close-on-click-modal="false">
      <el-form label-width="150px" class="baseForm" :rules="rules" :model="form" ref="baseForm">
        <el-form-item label="项目类型" class="item" prop="projectTypeId">
          <el-select v-model="form.projectTypeId" placeholder="请选择">
            <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目归属" class="item" prop="ownerShip">
          <el-select v-model="form.ownerShip" placeholder="请选择">
            <el-option label="系统内" value="系统内"></el-option>
            <el-option label="系统外" value="系统外"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户名称" class="item" prop="customerName">
          <el-input v-model="form.customerName" class="form-input"></el-input>
          <!-- <el-input v-model="form.customerName" class="form-input" @click.stop="getcustomer"></el-input> -->
        </el-form-item>
        <el-form-item label="联系人" class="item" prop="linker">
          <el-input v-model="form.linker" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" class="item" prop="phone">
          <el-input v-model="form.phone" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="项目名称" class="item" prop="name">
          <el-input v-model="form.name" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="项目地址" class="item" prop="address">
          <el-input v-model="form.address" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="合同情况" class="item" prop="contractState">
          <el-select v-model="form.contractState" placeholder="请选择">
            <el-option label="无需合同" value="无需合同"></el-option>
            <el-option label="已签合同" value="已签合同"></el-option>
            <el-option label="暂无合同先服务" value="暂无合同先服务"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批情况" class="item" prop="approveState">
          <el-select v-model="form.approveState" placeholder="请选择">
            <el-option label="暂未审批" value="暂未审批"></el-option>
            <el-option label="副总经理已审批" value="副总经理已审批"></el-option>
            <el-option label="总经理已审批" value="总经理已审批"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同时间" class="item" prop="planStartDate" v-if="form.contractState == '已签合同'">
          <el-date-picker v-model="form.planStartDate" type="date" placeholder="选择合同时间" />
        </el-form-item>
        <el-form-item label="预计合同签署时间" class="item" prop="planStartDate" v-if="form.contractState == '暂无合同先服务'">
          <el-date-picker v-model="form.planStartDate" type="date" placeholder="选择预计合同签署时间" />
        </el-form-item>
        <el-form-item label="实施内容" class="item full" prop="description">
          <el-input v-model="form.description" type="textarea" :rows="6"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <form-custoumer ref="r_customer"></form-custoumer>
  </div>
</template>
<script>
import api from '../../api/prepare'
import { today } from '../../utils/common'
import FormCustoumer from '../../components/dialog_customer.vue'
export default {
  components: { FormCustoumer },
  data() {
    return {
      types: [],
      rules: {
        projectTypeId: [{ required: true, message: '请选择项目类型', trigger: 'blur' }],
        customerName: [{ required: true, message: '请输入客户名称', trigger: 'change' }],
        linker: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
        contractState: [{ required: true, message: '请选择合同情况', trigger: 'blur' }],
        approveState: [{ required: true, message: '请选择审批情况', trigger: 'blur' }],
        planStartDate: [{ required: true, message: '请选择合同时间', trigger: 'blur' }],
        description: [
          { required: true, message: '请输入实施内容', trigger: 'blur' },
          { type: 'string', min: 10, message: '最少输入10个字符', trigger: 'blur' },
        ],
        ownerShip: [{ required: true, message: '请选择项目归属', trigger: 'blur' }],
      },
      form: {
        projectTypeId: null,
        customerName: '',
        linker: '',
        phone: '',
        name: '',
        address: '',
        contractState: '',
        approveState: '',
        planStartDate: '',
        description: '',
        ownerShip: '',
      },
      showDialog: false,
      dialogWidth: '100%',
      lockSave: false,
    }
  },
  methods: {
    gettypes() {
      api.types().then(({ msg }) => {
        this.types = msg
      })
    },
    showAdd() {
      delete this.form.id
      Object.assign(this.form, {
        projectTypeId: null,
        customerName: '',
        linker: '',
        phone: '',
        name: '',
        address: '',
        contractState: '',
        approveState: '',
        planStartDate: '',
        description: '',
      })
      this.showDialog = true
    },
    showEdit(id) {
      this.showDialog = true
      api.find(id).then(({ msg }) => {
        this.form = msg
      })
    },
    disabledDate(time) {
      return time.getTime() < today().getTime()
    },
    saveEdit() {
      if (this.lockSave) return
      this.lockSave = true
      setTimeout(() => {
        this.lockSave = false
      }, 1000)
      this.$refs.baseForm.validate((valid) => {
        if (!valid) return
        api.add(this.form).then(({ state, msg }) => {
          if (!state) {
            return this.$message.warning(msg)
          } else {
            this.$message.success(msg)
          }
          this.showDialog = false
          this.$emit('search')
        })
      })
    },
    getcustomer({ target }) {
      target.blur()
      this.$refs.r_customer.show().then(({ name }) => {
        this.form.customerName = name
      })
    },
  },
  mounted() {
    this.gettypes()
    var w = window.innerWidth
    this.dialogWidth = w > 768 ? '768px' : '100%'
  },
}
</script>
<style scoped>
.baseForm {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

@media screen and (max-width: 768px) {
  .baseForm .item {
    width: 100%;
  }
}

@media screen and (min-width: 768px) {
  .baseForm .item {
    width: 50%;
  }
  .baseForm .item.full {
    width: 100%;
  }
}

.form-input {
  width: 220px;
}
</style>
